import React from 'react';
import { Row, Col } from 'antd';
// import './index.less';

const ellipsis = {
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
}

const DescriptionList = ({
  descriptionList,
  col = 3,
  contentLayout = {
    labelWidth: 5,
    contentWidth: 19
  },
  ...restProps
}) => {
  const { labelWidth = 5, contentWidth = 19} = contentWidth || {};
  const span = 24/col;
  return (
    <Row>
      {descriptionList && descriptionList.length ? (
        descriptionList.map((item, index) => {
          return (
            <Col span={span} key={index}>
              <Row type='flex' align="middle" justify="space-between">
                <Col span={labelWidth} style={{...ellipsis, textAlign: 'right'}}>
                  <label>{item.title}:</label>
                </Col>
                <Col span={contentWidth} style={ellipsis}>
                  {item.value}
                </Col>
              </Row>
            </Col>
          );
        })
      ) : (null)}
    </Row>
  );
};

export default DescriptionList;